<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page isELIgnored="false"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script src="${pageContext.request.contextPath}/static/js/json2.js"></script>
	this is b.jsp ${msg}
	<form action="/hello/modelAndView">
		<input type="text" name="a"> <input type="submit">
	</form>
	<table id="tabsle"></table>
	<div class="container-fluid">
		<!-- Stack the columns on mobile by making one full-width and the other half-width -->
		<div class="row">
			<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>

		<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
		<div class="row">
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>

		<!-- Columns are always 50% wide, on mobile and desktop -->
		<div class="row">
			<div class="col-xs-6">.col-xs-6</div>
			<div class="col-xs-6">.col-xs-6</div>
		</div>

	</div>
	<script>
		$('#table').bootstrapTable({
			columns : [ {
				field : 'id',
				title : 'Item ID'
			}, {
				field : 'name',
				title : 'Item Name'
			}, {
				field : 'price',
				title : 'Item Price'
			}, {
				value : '123',
				field : "checked",
				checkbox : true,
				disabled : true,
				formatter : function(value, row, index) {
					return {};
				}
			} ],
			data : [ {
				id : 1,
				name : 'Item 1',
				price : '$1',
				checked : true
			}, {
				id : 2,
				name : 'Item 2',
				price : '$2'
			} ]
		});

		$('#table').on('click-row.bs.table', function(row, $element, field) {

			alert(JSON.stringify($('#table').bootstrapTable('getSelections')));
		});
	</script>
</body>
</html>